import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/common/index.dart';
import 'package:oramemo/generated/assets.dart';

import 'facility_details_logic.dart';
import 'facility_details_state.dart';

class FacilityDetailsPage extends StatelessWidget {
  const FacilityDetailsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Facility_detailsLogic logic = Get.put(Facility_detailsLogic());
    final Facility_detailsState state = Get.find<Facility_detailsLogic>().state;

    return Container(
        width: Get.width,
        height: Get.height,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Color(0Xffc4ddf9),
              Color(0Xffcdf3ef),
            ],
          ),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            leading: InkWell(
                onTap: () => Get.back(),
                child: const Icon(Icons.arrow_back_ios, color: Colors.black)),
            title: const Text(
              'Dec 19,2024 18:22',
              style: TextStyle(color: Colors.black, fontSize: 16),
            ),
            centerTitle: true,
          ),
          body: Container(
            color: Color(0xFFF3F6F9),
            child: ListView(
              padding: const EdgeInsets.all(16),
              children: [
                // Call Brief Card
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: const Color(0xFFEAF0F9),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: Color(0xFF93BBFC)),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const IconX.image(Assets.facilityDetailsCallin,
                              size: 21),
                          const SizedBox(width: 8,height: 8,),
                          Text(
                            'Call Brief',
                            style: TextStyle(
                              color: Colors.blue[400],
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                      Text(
                        '来电者是XXX智能客服，通知机主因电话号码异常无法联系，需机主确定是否需要继续上门取件。',
                        style: TextStyle(
                          color: Colors.blue,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),

                // Time stamp
                const Center(
                  child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    child: Text(
                      '15:25',
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 12,
                      ),
                    ),
                  ),
                ),

                // User Message
                _buildMessage('嗯，您好!他在开车，您找他有什么事呢？'),
                _buildMessage(
                    '是顺丰智能客服，您刚刚下了单由深圳市发往深圳市的快递，快递员，因您的电话号码异常，无法联系到您。如需继续上门取件，请按一。有其他需求希望快递员给您回电，请按二重新拨报请按井号键结束挂机。',
                    isCalling: true),
                // User Response
                _buildMessage('好的，我会跟他说的，让他尽快回复您'),
              ],
            ),
          ),
          bottomNavigationBar: const bottomWidget(),
        ));
  }

  Container _buildMessage(String text, {isCalling = false}) {
    Color backColor = isCalling ? const Color(0xffE1EBFA) : Colors.white;
    EdgeInsets margin = isCalling
        ? const EdgeInsets.only(bottom: 16, right: 64)
        : const EdgeInsets.only(bottom: 16, left: 64);
    return Container(
      margin: margin,
      decoration: BoxDecoration(
        color: backColor,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(
              text,
              style: const TextStyle(fontSize: 14),
            ),
          ),
          const Positioned(
              right: 12,
              bottom: 10,
              child: IconX.image(Assets.facilityDetailsMessage, size: 19)),
        ],
      ),
    );
  }
}

class bottomWidget extends StatelessWidget {
  const bottomWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 7, 16, 20),
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(color: Colors.black12),
        ),
      ),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          IconX.image(
            Assets.facilityDetailsVoice,
            width: 93,
            height: 36,
          ),
          SizedBox(
            width: 1,
            height: 36,
          ),
          IconX.image(
            Assets.facilityDetailsCall,
            width: 93,
            height: 36,
          ),
          Spacer(),
          IconX.image(
            Assets.facilityDetailsSharing,
            width: 26,
            height: 26,
          ),
          SizedBox(
            width: 16,
            height: 36,
          ),
          IconX.image(
            Assets.facilityDetailsInfo,
            width: 26,
            height: 26,
          ),
        ],
      ),
    );
  }
}
